import {  Menu, Affix  } from'antd';
import {useState }from 'react';

import axios from 'axios';
import { Link } from 'react-router-dom';

const { SubMenu } = Menu;

interface category{
  categoryId: number,
  categoryName: string,
  coverImgs: string[]
}

export default function LeftMenu(){
      const Boy: category[] =[
        {
            "categoryId": 1,
            "categoryName": "玄幻小说",
            "coverImgs": [
                "/file/group1/book/cae1e1f4-3f63-4560-b1d3-85485b7e5f47.jpg",
                "/file/group1/book/6dd4a16c-3e86-41bb-b628-31c8ed9e5569.jpg",
                "/file/group1/book/525837a5-5d97-41e1-a903-696f28c35556.jpg"
            ]
        },
        {
            "categoryId": 2,
            "categoryName": "修真小说",
            "coverImgs": [
                "/file/group1/book/745c42f8-9ddd-4612-89af-1402f8931d91.jpg",
                "/file/group1/book/ae2c0776-47df-4de8-9327-29bf0e054814.jpg",
                "/file/group1/book/c4a58ced-5195-48d1-b9b4-29a2c882faa0.jpg"
            ]
        },
        {
            "categoryId": 3,
            "categoryName": "都市小说",
            "coverImgs": [
                "/file/group1/book/11fc85de-fe38-4abb-b60b-9a924edd9a76.jpg",
                "/file/group1/book/906672f1-006b-47ec-a053-f189c3806093.jpg",
                "/file/group1/book/9abc865b-c311-46f5-8aa0-a6b80aa04208.jpg"
            ]
        },
        {
            "categoryId": 5,
            "categoryName": "网游小说",
            "coverImgs": [
                "/file/group1/book/a0633ad0-87e4-4cdd-9ea6-a7554c881301.jpg",
                "/file/group1/book/5718f25e-6e28-45d2-8abe-d7d15dab950e.jpg",
                "/file/group1/book/4e865cd0-236d-4687-9663-5c1287efec7f.jpg"
            ]
        },
        {
            "categoryId": 6,
            "categoryName": "科幻灵异",
            "coverImgs": [
                "/file/group1/book/b454a8f1-4c95-4eb2-8bc1-cee56d4cffba.jpg",
                "/file/group1/book/28584008-b781-499d-a54a-07294012988a.jpg",
                "/file/group1/book/1c228e58-d4df-46d1-ad8c-91dec69715b4.jpg"
            ]
        },
        {
            "categoryId": 7,
            "categoryName": "历史小说",
            "coverImgs": [
                "/file/group1/book/67b16e23-9e1f-4acb-a96e-9fc16fa6477e.jpg",
                "/file/group1/book/9bd292c7-088f-4934-9dbd-c47eab611180.jpg",
                "/file/group1/book/c2fc0b5b-1907-4fad-9932-e84f2829171e.jpg"
            ]
        },
        {
            "categoryId": 9,
            "categoryName": "其他小说",
            "coverImgs": [
                "/file/group1/book/e2c9507f-f2bc-4fed-8489-04f2d63f6866.jpg",
                "/file/group1/book/a7e128d9-bc86-417c-8455-fca1b2caf93e.jpg",
                "/file/group1/book/aa4d7110-23ae-4b72-bba6-6f73cea6ba42.jpg"
            ]
        }
    ];
    const Girl: category[] =[
        {
            "categoryId": 3,
            "categoryName": "都市小说",
            "coverImgs": [
                "/file/group1/book/11fc85de-fe38-4abb-b60b-9a924edd9a76.jpg",
                "/file/group1/book/906672f1-006b-47ec-a053-f189c3806093.jpg",
                "/file/group1/book/9abc865b-c311-46f5-8aa0-a6b80aa04208.jpg"
            ]
        },
        {
            "categoryId": 6,
            "categoryName": "科幻灵异",
            "coverImgs": [
                "/file/group1/book/b454a8f1-4c95-4eb2-8bc1-cee56d4cffba.jpg",
                "/file/group1/book/28584008-b781-499d-a54a-07294012988a.jpg",
                "/file/group1/book/1c228e58-d4df-46d1-ad8c-91dec69715b4.jpg"
            ]
        },
        {
            "categoryId": 8,
            "categoryName": "言情小说",
            "coverImgs": [
                "/file/group1/book/49dc927b-b13a-4390-a66f-090a6e9ce2b6.jpg",
                "/file/group1/book/762fc446-4306-451e-80d9-e008d24c698c.jpg",
                "/file/group1/book/1fe0e466-278f-4283-aace-33f58c1c29eb.jpg"
            ]
        },
        {
            "categoryId": 9,
            "categoryName": "其他小说",
            "coverImgs": [
                "/file/group1/book/e2c9507f-f2bc-4fed-8489-04f2d63f6866.jpg",
                "/file/group1/book/a7e128d9-bc86-417c-8455-fca1b2caf93e.jpg",
                "/file/group1/book/aa4d7110-23ae-4b72-bba6-6f73cea6ba42.jpg"
            ]
        },
        {
            "categoryId": 10,
            "categoryName": "女生小说",
            "coverImgs": [
                "/file/group1/book/0eed9c48-5998-44a4-b5fb-cdfd5d77cf4a.jpg",
                "/file/group1/book/fc8daeaa-62c1-45c4-bb49-56485d521812.jpg",
                "/file/group1/book/462e72d2-0f45-4b0e-a572-1f43267854f2.jpg"
            ]
        }
    ];
    const [BoyCategories,SetBoyCategories] = useState(Boy);
    const [GirlCategories,SetGirlCategories] = useState(Girl);

    // 重新获取分类浏览信息
    const ReGetCategories= () =>{
        axios.get('http://yuenov.com:15555/app/open/api/category/getCategoryChannel').then((response)=>{
            console.log("查询结果:", response.data);
            const Boy: category[] = [];
            response.data.data.channels[0].categories.forEach((element: { categoryId: any; categoryName: any; coverImgs: any; }) => {
                const newBoy:category = {
                    categoryId: element.categoryId,
                    categoryName: element.categoryName,
                    coverImgs: element.coverImgs,
                }
                Boy.push(newBoy);
            });
            const Girl: category[] = [];
            response.data.data.channels[1].categories.forEach((element: { categoryId: any; categoryName: any; coverImgs: any; }) => {
                const newGirl:category = {
                    categoryId: element.categoryId,
                    categoryName: element.categoryName,
                    coverImgs: element.coverImgs,
                }
                Girl.push(newGirl);
            });
            SetBoyCategories(Boy);
            SetGirlCategories(Girl);
      });
    }

    // 点击单个分类后操作
    const JumpToCategory = (e:any,categoryId:number) => {
        console.log("分类浏览ID：！",categoryId);
        
    }



    const [top] = useState(65); // 图钉位移
    return (
      <div style={{ width: 200, position: 'absolute'}}>
        <Affix offsetTop={top}>
        <Menu mode="inline" defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']} style={{ height: '100%', borderRight: 0 }}>
          <SubMenu key="SubMenu" title="分类浏览" onTitleClick={ReGetCategories}>
            <Menu.ItemGroup title="浏览全部">
            <Link to={{ pathname: '/home'}}><Menu.Item>全部分类</Menu.Item></Link>
            </Menu.ItemGroup>
            <Menu.ItemGroup title="男生">
              {
                BoyCategories.map(item => {
                  return (
                    <Link to={{ pathname: '/category/'+item.categoryId}} >
                     <Menu.Item key={item.categoryId} onClick={e=>{JumpToCategory(e,item.categoryId)}}>{item.categoryName}</Menu.Item>
                    </Link>
                  );
                })
              }           
            </Menu.ItemGroup>
            <Menu.ItemGroup title="女生">
              {
                GirlCategories.map(item => {
                  return (
                    <Link to={{ pathname: '/category/'+item.categoryId}} >
                    <Menu.Item key={item.categoryId} onClick={e=>{JumpToCategory(e,item.categoryId)}}>{item.categoryName}</Menu.Item>
                    </Link>
                  );
                })
              }           
            </Menu.ItemGroup>
           </SubMenu>
          </Menu>
          </Affix>
      </div>
    );

}